<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.11/dist/css/layui.css">
  <title>用户注册</title>
</head>
<body>
  <form class="layui-form" action="/register" method="post" enctype="multipart/form-data">
    <div class="layui-form-item">
      <label class="layui-form-label">昵称</label>
      <div class="layui-input-block">
        <input type="text" name="nickname" required lay-verify="required" placeholder="请输入昵称" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="radio" name="gender" value="男" title="男" checked>
        <input type="radio" name="gender" value="女" title="女">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">爱好</label>
      <div class="layui-input-block">
        <input type="checkbox" name="hobby" value="阅读" title="阅读">
        <input type="checkbox" name="hobby" value="运动" title="运动">
        <input type="checkbox" name="hobby" value="音乐" title="音乐">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">头像</label>
      <div class="layui-input-block">
        <input type="file" name="avatar" accept="image/*" required lay-verify="required">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">城市</label>
      <div class="layui-input-block">
        <select name="city-province"class="a1">
        </select>
        <select name="city-city" class="a2">
        </select>
        <select name="city-district" class="a3">
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formSubmit">提交</button>
      </div>
    </div>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/layui@2.8.11/dist/layui.js"></script>
  <script>
    layui.use('form', function(){
      var form = layui.form;
      form.on('submit(formSubmit)', function(data){
        // 可添加额外验证
        return true;
      });
    });
    var data = [{
            name: "河北省",
            city: [{
                name: "石家庄市",
                districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区"]
            }, {
                name: "张家口市",
                districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区"]
            }, {
                name: "承德市",
                districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]
            }, {
                name: "秦皇岛市",
                districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县"]
            }]
        }, {
            name: "山西省",
            city: [{
                name: "太原市",
                districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县"]
            }, {
                name: "朔州市",
                districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
            }, {
                name: "大同市",
                districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县"]
            }, {
                name: "阳泉市",
                districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
            }]
        }]
        var a1 = document.querySelector('.a1')
        data.forEach(item => {
            a1.innerHTML +=`
            <option>${item.name}</option>
            `
        })
        var a2 = document.querySelector('.a2')
        a1.addEventListener('click',() =>{
            a2.innerHTML = ''
            data.forEach(item =>{
                if(a1.value == item.name){
                    item.city.forEach(i =>{
                        a2.innerHTML +=`<option>${i.name}</option>`
                    })
                }
            })
        })
        var a3 = document.querySelector('.a3')
        a2.addEventListener('click',()=>{
            a3.innerHTML = ''
            data.forEach(item=>{
                item.city.forEach((item2)=>{
                    if(a2.value == item2.name){
                        item2.districtAndCounty.forEach((item3)=>{
                            a3.innerHTML += `<option>${item3}</option>`
                        })
                    }
                })
            })
        })
  </script>
</body>
</html>